<template>
  <a-form
    ref="formRef"
    :label-col="labelCol"
    :model="taskForm"
    :wrapper-col="wrapperCol"
  >
    <a-form-item ref="name" label="任务标题" name="title">
      <a-input v-model:value="taskForm.title"
               :maxlength="20"
               placeholder="请输入任务标题：" show-count
      />
    </a-form-item>
    <a-form-item label="任务描述" name="description">
      <a-textarea v-model:value="taskForm.description"
                  :auto-size="{ minRows: 2, maxRows: 5 }"
                  :maxlength="255"
                  allowClear="true"
                  placeholder="请输入具体的任务描述：" show-count
      />
    </a-form-item>
    <a-form-item label="任务优先级" name="priority">
      <a-select
        v-model:value="taskForm.priority"
        :options="TASK_PRIORITY_OPTIONS"
        allow-clear
        placeholder="请选择任务级别"
        style="min-width: 180px"
      />
    </a-form-item>
    <a-form-item label="任务状态" name="status">
      <a-select
        v-model:value="taskForm.status"
        :options="TASK_STATUS_OPTIONS"
        allow-clear
        placeholder="请选择任务状态"
        style="min-width: 180px"
      />
    </a-form-item>
    <!--    <a-form-item label="任务截止时间">
          <a-date-picker
            v-model:value="taskForm.deadTime"
            show-time
            type="date"
            placeholder="选择你的任务截止时间"
            style="width: 100%"
          />
        </a-form-item>-->
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">确认</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { taskAddUsingPost } from '@/api/taskController.ts'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { TASK_PRIORITY_OPTIONS, TASK_STATUS_OPTIONS } from '@/constants/task.ts'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'


const formRef = ref()
const labelCol = { span: 5 }
const wrapperCol = { span: 13 }

const taskForm = reactive<API.AddTaskRequest>({})

const router = useRouter()

const loginUserStore = useLoginUserStore()

/**
 * 修改任务
 * @param values
 */
const onSubmit = async (values: any) => {
  const userId = loginUserStore.loginUser.id
  const res = await taskAddUsingPost({
    userId,
    ...taskForm

  })
  if (res.data.code === 0 && res.data.data) {
    message.success('任务添加成功！')
    await router.push({
      path: '/my'
    })
  } else {
    message.error('任务添加失败：' + res.data.message)
  }
}

const resetForm = () => {
  formRef.value.resetFields()
}
</script>

